import React, {Component} from 'react';
import {Table, Pagination} from '@icedesign/base';
import IceContainer from '@icedesign/container';
import TableFilter from './TableFilter';
import {getTableData} from '../../../../api/index'
import DataBinder from '@icedesign/data-binder';
import EditDialog from "../../../BasicTable/components/TabTable/components/EditDialog";
import DeleteBalloon from "../../../BasicTable/components/TabTable/components/DeleteBalloon";

@DataBinder({ // todo 必须和下面的 组件类 挨着写
  SendData: { // SendData 是 key
    url: '/api/TableData',
    method: 'post',
    data: {       // todo 发送参数的格式
      current: 1,
      pageSize: 10,
      years: [],
      deviceType: [],
    },
    defaultBindingData: { // todo 这里是 接口返回数据的格式
      status: 200,
      statusText: 'ok',
      data: {
        ListResult: [],
        current: 1,
        total: 0,
        pageSize: 10
      }
    }
  }
})


export default class SearchTable extends Component {
  static displayName = 'SearchTable';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    // let page = {current: 1, pageSize: 10, years: [], deviceType: []};
    this.state = { // 默认分页数据
      current: 1,
      pageSize: 10,
      data: {},
      years: [],
      deviceType: []
    }
  }

  RecvFormData({years, deviceType}) { // 组件通信
    console.log(years, deviceType);
    let y = []
    let d = []
    if (years==undefined || years == ""){
      y = []
    }else{
      y=[]
      y.push(years)
    }
    if (deviceType==undefined || deviceType == ""){
      d = []
    }else{
      d = []
      d.push(deviceType)
    }
    this.setState({
      years:y,
      deviceType:d
    });
    this.props.updateBindingData('SendData', {
      data: {   // 发送参数
        current: 1,
        pageSize: this.state.pageSize,
        years: y,
        deviceType: d,
      }
    });
  }

  componentDidMount() {
    // todo 使用databinder 默认数据第一次渲染，初始化第一页的数据

    // 使用DataBinder 中默认的 发送参数
    this.props.updateBindingData('SendData');
  }

  handlePaginationChange = (current) => { // 改变页码函数,current自动传入
    // this.setState({ // 页码保存
    //   current: current
    // });
    this.props.updateBindingData('SendData', {
      data: {   // 发送参数
        current: current,
        pageSize: this.state.pageSize,
        years: this.state.years,
        deviceType: this.state.deviceType,
      }
    });
  };

  handlePageSizeChange = (pagesize) => { // 改变显示个数
    this.setState({
      pageSize: pagesize // 显示个数保存
    });
    this.props.updateBindingData('SendData', {
      data: {   // 发送参数
        current: 1, // 显示的个数多以后 ，可能会没有超过当前页
        pageSize: pagesize,
        years: this.state.years,
        deviceType: this.state.deviceType,
      }
    });
  };


  renderOper = () => {
    return (
      <div>
        <a style={styles.link}>详情</a>
        <span style={styles.separator}/>
        <a style={styles.link}>申请权限</a>
      </div>
    );
  };

  render() {
    console.log(this.props.bindingData)
    const dataSource = this.props.bindingData.SendData; // todo  this.props.bindingData. binder的key
    console.log(dataSource);

    return (
      <IceContainer style={styles.container}>
        <h4 style={styles.title}>测试数据</h4>
        <TableFilter filterData={this.RecvFormData.bind(this)}/>
        <Table
          dataSource={dataSource.ListResult}
          hasBorder={false}
          style={{padding: '0 20px 20px'}}
        >
          <Table.Column title="STA_ID" dataIndex="STA_ID"/>
          <Table.Column title="年份" dataIndex="YMonth"/>
          <Table.Column title="站点1名称" dataIndex="ORG1_NAME"/>
          <Table.Column title="驱动类型名字" dataIndex="DeviceTypeName"/>
          <Table.Column title="站点2名称" dataIndex="ORG2_NAME"/>
          <Table.Column title="驱动类型" dataIndex="DeviceType"/>
        </Table>
        <Pagination
          style={styles.pagination}
          current={dataSource.current}
          pageSizeSelector='filter'
          total={dataSource.total}
          pageSize={dataSource.pageSize}
          onChange={this.handlePaginationChange} // 点击页码的 函数
          onPageSizeChange={this.handlePageSizeChange}  // 点击每页显示多少的 函数
        />
      </IceContainer>
    );
  }
}

const styles = {
  container: {
    margin: '20px',
    padding: '0 0 20px',
  },
  title: {
    margin: '0',
    padding: '15px 20px',
    fonSize: '16px',
    textOverflow: 'ellipsis',
    overflow: 'hidden',
    whiteSpace: 'nowrap',
    color: 'rgba(0,0,0,.85)',
    fontWeight: '500',
    borderBottom: '1px solid #eee',
  },
  link: {
    margin: '0 5px',
    color: 'rgba(49, 128, 253, 0.65)',
    cursor: 'pointer',
    textDecoration: 'none',
  },
  separator: {
    margin: '0 8px',
    display: 'inline-block',
    height: '12px',
    width: '1px',
    verticalAlign: 'middle',
    background: '#e8e8e8',
  },
  pagination: {
    textAlign: 'right',
    marginRight: '20px',
  },
};
